<template>
  <!-- 有子菜单：使用 el-sub-menu -->
  <el-sub-menu v-if="item.children?.length && canIshow(item.path, store.role)" :index="item.path">
    <template #title>
      <i v-if="item.icon" class="iconfont" :class="[item.icon, getClass(item.path, cur)]"></i>
      <span :class="getClass(item.path, cur)">{{ item.title }}</span>
    </template>
    <!-- 递归渲染子菜单 -->
    <MenuItemView
      v-for="child in item.children"
      :key="child.path"
      :item="child"
      :cur="cur"
    />
  </el-sub-menu>

  <!-- 无子菜单：使用 el-menu-item -->
  <el-menu-item v-else-if="canIshow(item.path, store.role)" :index="item.path" :title="item.title">
    <i v-if="item.icon" class="iconfont" :class="[item.icon]"></i>
    <template #title>
      <span>{{ item.title }}</span>
    </template>
  </el-menu-item>
</template>

<script setup lang="ts">
import { userStore } from '@/stores/user'
import { canIshow } from '@/tools/permission'

// 引入自身（递归组件的关键）
import MenuItemView from '@/components/MenuItemView.vue'
import type { MenuItem } from '@/types/global.d'
const { item, cur } = defineProps<{
  item: MenuItem
  cur: string
}>()

const store = userStore()

// 判断是否显示该菜单
const getClass = (path: string, cur: string) => {
  if (path === cur) {
    return 'active'
  } else if (cur.startsWith(path) && path !== '/') {
    return 'active'
  }
  return ''
}
</script>
<style lang="less" scoped>
.iconfont {
  margin-right: 6px;
}
.active {
  color: #ffd04b;
}
</style>
